<template>
    <a-modal :title="$t('Edit')+$t('Export')+$t('Path')" v-model='pathcreate' @cancel='cancelhandle' width='45%' @ok='subnew' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
        	<a-form-item :label="$t('Path')" v-bind='formlayout'>
                <!-- <a-select @change="handleChange" 
                	v-decorator="['path',{
	                    rules:[{required:true,message:$t('Choose')+$t('Path')}],initialValue:onelist.path
	                }]"
                	:placeholder="$t('Choose')+$t('Path')" disabled>
					<a-select-option :value="k" v-for="(k, i) in $store.state.baseshare" :key="i">{{k}}</a-select-option>
				</a-select> -->

				<a-input
					disabled
					v-decorator="['path', {
						rules: [
							{ required: true },
							{ validator: pathValidator },
						],
						initialValue: onelist.path
					}]"
					style="width: 80%"
				/>
				<a-button disabled style="margin-left: 16px;" type='primary' @click="handleChoose">
                    {{ $t('浏览') }}
                </a-button>

            </a-form-item>
            
            <a-form-item :label="$t('Alias')" v-bind="formlayout">
            	<a-input 
					:disabled="!onelist.pseudo"
            		v-decorator="['pseudo',{
						rules:[{pattern:namePattern,message:$t('Not_enter_special_characters')}],
	                    initialValue:onelist.pseudo
	                }]"
                :placeholder="$t('Enter')+$t('Export')+$t('Path')"/>
				<!-- rules:[{required:true,message:$t('Enter')+$t('Export')+$t('Path')}], -->
            </a-form-item>
            
            <a-form-item :label="$t('Access-permission')" v-bind="formlayout">
                <a-select v-decorator="['access_type',{
                    rules:[{required:true,message: $t('Choose')+$t('Access-permission')}],initialValue:String(onelist.access_type)
                }]">
					<a-select-option value='1'>{{$t('Read_and_write')}}</a-select-option>
                    <a-select-option value="2">{{$t('Read_only')}}</a-select-option>
                </a-select>
            </a-form-item>
            
            <a-form-item label='Squash' v-bind="formlayout">
                <a-select v-decorator="['squash',{
                    rules:[{required:true,message:$t('Choose')+'Squash'}],initialValue:String(onelist.squash)
                }]">
					<a-select-option value="1">no_root_squash</a-select-option>
                    <a-select-option value="2">root_squash</a-select-option>
                </a-select>
            </a-form-item>
            
            <!-- <a-form-item label='Client' v-bind="formlayout" style="margin: 0;"> </a-form-item>
            <a-form-item style="background-color: #e6f4ff;padding-top: 1em;">
	            <div class="client"> 
	        		<a-form-item label='IP' v-bind="formlayout" style="width: 30%;text-align: left;">
		                <a-input 
		            		v-decorator="['ip',{
			                    rules:[{required:true,message:'请输入IP'}]
			                }]"
		                placeholder="请输入IP" />
		            </a-form-item>
	        		<a-form-item label='Squash' v-bind="formlayout" style="width: 30%;">
		                <a-select>
		                    <a-select-option value='no_root_squash'>no_root_squash</a-select-option>
		                    <a-select-option value='root_squash'>root_squash</a-select-option>
		                </a-select>
		            </a-form-item>
	        		<a-form-item label='访问权限' v-bind="formlayout" style="width: 38%;">
		                <a-select>
		                    <a-select-option value='RO'>RO</a-select-option>
		                    <a-select-option value='RW'>RW</a-select-option>
		                </a-select>
		            </a-form-item>
	                <a-button type="primary" class="subtn">确定</a-button>
	                <a-button type="danger" class="subtn">删除</a-button>
	            </div>
	            <div class="client"> 
	        		<a-form-item label='IP' v-bind="formlayout" style="width: 30%;text-align: left;">
		                <a-input 
		            		v-decorator="['ip',{
			                    rules:[{required:true,message:'请输入IP'}]
			                }]"
		                placeholder="请输入IP" />
		            </a-form-item>
	        		<a-form-item label='Squash' v-bind="formlayout" style="width: 30%;">
		                <a-select>
		                    <a-select-option value='no_root_squash'>no_root_squash</a-select-option>
		                    <a-select-option value='root_squash'>root_squash</a-select-option>
		                </a-select>
		            </a-form-item>
	        		<a-form-item label='访问权限' v-bind="formlayout" style="width: 38%;">
		                <a-select>
		                    <a-select-option value='RO'>RO</a-select-option>
		                    <a-select-option value='RW'>RW</a-select-option>
		                </a-select>
		            </a-form-item>
	                <a-button type="primary" class="subtn">确定</a-button>
	                <a-button type="danger" class="subtn">删除</a-button>
	            </div>
	            <a-button type="primary" @click="addbtn = 1" style="float: right;margin: 0 1em 1em 0;">新增Client</a-button>
            </a-form-item>
            <div class="client add" v-if="addbtn == 1"> 
        		<a-form-item label='IP' v-bind="formlayout" style="width: 30%;text-align: left;">
	                <a-input 
	            		v-decorator="['ip',{
		                    rules:[{required:true,message:'请输入IP'}]
		                }]"
	                placeholder="请输入IP" />
	            </a-form-item>
        		<a-form-item label='Squash' v-bind="formlayout" style="width: 30%;">
	                <a-select>
	                    <a-select-option value='no_root_squash'>no_root_squash</a-select-option>
	                    <a-select-option value='root_squash'>root_squash</a-select-option>
	                </a-select>
	            </a-form-item>
        		<a-form-item label='访问权限' v-bind="formlayout" style="width: 38%;">
	                <a-select>
	                    <a-select-option value='RO'>RO</a-select-option>
	                    <a-select-option value='RW'>RW</a-select-option>
	                </a-select>
	            </a-form-item>
                <a-button type="primary" @click="addbtn = 0" class="subtn">确定</a-button>
                <a-button type="danger" class="subtn">删除</a-button>
            </div> -->
        </a-form>

		<chooseDirectory ref="directoryRef" @choose-directory="getDirectoryPath" @current-directory="handleCurrent" />

    </a-modal>
</template>
<script>
import request from '@/request/request'
import chooseDirectory from '../../../../views/storage_mgr/filesystem/directory/chooseDirectory.vue';

export default {
    name:'epath',
    props:['ep','onelist'],
	components: { chooseDirectory },
    data(){
        return{
            form:this.$form.createForm(this),
            pathcreate:false,
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:14}
            },
//          uint:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
			addbtn:0,
			spinning:false,
			directory: '',
            id: '',
            level: '',
        }
    },
    watch:{
        ep(val){
            this.pathcreate=val
        },
    },
    methods:{
    	handleChange(value) {
	    },
        cancelhandle(e){
            this.form.resetFields();
			this.spinning = false;
            // this.pathcreate=false
            this.$emit('omodal', false, true);
        },
        subnew(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
                if(!err){
					this.spinning = true
					let pe = ''
					if(value.pseudo !== undefined){
						pe = value.pseudo
					}
					// this.$axios.put(this.allurl+'cephfs/nfs',{
					request('post', 'cephfs/ganesha/update',{
						// fs_name:this.onelist.fs_name,
						id: this.onelist.id,
						path:value.path, // 路径
						pseudo: pe,
						access_type: value.access_type,
						squash: value.squash
					}).then(res=>{
						this.model(res.data.id); //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag); //通知列表显示
						// this.gettask()  //任务栏信息
						this.form.resetFields();
						this.spinning = false;
           	 			// this.pathcreate=false
            			this.$emit('omodal',false, false);
					}).catch(err => {
						this.spinning = false;
						this.$emit('omodal',false, false);
						this.form.resetFields();
					})
                }
            })
        },
		handleChoose() {
            this.$refs.directoryRef.isShow = true
			if (this.id) this.$refs.directoryRef.test(this.directory, this.id, this.level)
        },
		handleCurrent(item, id, level) {
            this.directory = item
            this.id = id
            this.level = level
        },
		pathValidator(rule, value, callback) {
			if (value == '') callback(this.$t('Choose') + this.$t('目录路径'))
            // if (value == '/') callback()
            else {
                const reg = /^(\/[\w.-]+)+\/?$/
                if (!reg.test(value)) callback(this.$t('Choose') + this.$t('请输入或选择目录路径'))
                else callback()
            }
        },
		getDirectoryPath(path) {
			this.form.setFieldsValue({path})
        },
    }
}
</script>

<style scoped>
	.client{
		display: flex;
		justify-content: flex-start;
	}
	.subtn{
		margin-right: 1em;
		margin-top: 0.3em;
	}
	.add{
		overflow: hidden;
		border: 3px solid #e6f4ff;
		padding-top: 1em;
	}
</style>
